.content-box {
  padding: 0 12px;
  margin-top: 42px;
  padding-top: 42px;

  .tab-bar-box {
    text-align: center;
  }
}

.box {
  //   width: 100vw;
  //   background: #eee;
  padding: 10px 0;
  //   margin: 0 24px;
  white-space: nowrap; /*文本不会换行，文本会在在同一行上继续*/
  overflow-y: auto; /*可滑动*/

  /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
  .box::-webkit-scrollbar {
    display: none;
  }
  .box1 {
    // width: 49%;
    margin-left: 3%;
    // height: 100px;
    background: #fff;
    display: inline-block; /*行内块元素*/
  }

  .image-box {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 24px;
  }

  .text-box {
    font-size: xx-small;
  }
}

.goods-image {
  height: 328px;
  width: 248px;
}

.goods-title-text {
  font-size: 140%;
}

.good-remark-text {
  color: #555;
  font-size: 80%;
}

.text-p {
  /*这两行代码可以解决大部分场景下的换行问题*/
  word-break: break-all;
  word-wrap: break-word;
  /*但在有些场景中，还需要加上下面这行代码*/
  white-space: normal;
  font-size: 40%;
  display: -webkit-box; /*设置为弹性盒子*/
  -webkit-line-clamp: 3; /*最多显示5行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*超出显示为省略号*/
  -webkit-box-orient: vertical;
}

.goods-remark {
  height: 140px;
  display: -webkit-box;
  -webkit-box-orient: vertical; /*设置方向*/
  -webkit-line-clamp: 4; /*设置超过为省略号的行数*/
  overflow: hidden;
}

.price-text {
  color: red;
}

.detail-box {
  padding-left: 28px;
}
.tag-box {
  text-align: center;
  border: 1px solid #a1a1a1;
  margin: 0 4px;
  //   padding: 10px 12px;
  background: #dddddd;
  //   width: 350px;
  border-radius: 12px;
}

.auther-box {
  padding-bottom: 0;
}

.goods {
  //   padding: 0 24px;
  margin: 12px 0;
  padding-right: 48px;
  width: auto;
  background-color: #eee;
  border: 1px solid rgb(24, 157, 245);
  border-radius: 12px;
}
